<!-- fileName: Search -->
<template>
  <div class="searchMusicContainer">
    <div style="padding: 0 30px 20px;">
      <div>
        <h3>
          搜索 {{ $route.params.keyword }}
        </h3>
      </div>
      <div>
        <span style="font-size: 13px; color: rgba(0, 0, 0, .5)">你可能感兴趣</span>
        <!--   order: 顺序     -->
        <div style="display: flex; margin: 10px 0">
          <div v-for="order in recommendData.orders">
            <div class="effect-row" style="display: flex; margin-right: 10px;" v-for="recommend in recommendData[order]"
                 v-if="order === 'artist'">
              <div>
                <el-avatar :src="recommend.picUrl + '?param=50y50'"></el-avatar>
              </div>
              <div class="right">
                <div>
                  <span class="artist">歌手：{{ recommend.name }}</span> <span
                  class="alias"
                  v-if="recommend.alias && recommend.alias.length > 0">（{{recommend.alias.find(v => v)}}）</span>
                </div>
                <div class="fans">粉丝: {{ recommend.fansSize | unitToThousand }}，歌曲 {{
                  recommend.musicSize }}
                </div>
              </div>
            </div>
            <div class="effect-row" style="display: flex; margin-right: 10px;" v-for="recommend in recommendData[order]"
                 v-if="order === 'album'">
              <div>
                <el-avatar :src="recommend.picUrl + '?param=50y50'" shape="square"></el-avatar>
              </div>
              <div class="right">
                <div class="album">
                  专辑：{{ recommend.name }}
                </div>
                <div class="singer">{{ recommend.artist.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-tabs style="width: 100%" v-model="tabName">
      <el-tab-pane label="单曲" name="first">
        <!-- 不知道这个是什么bug, target不加也能用 -->
        <el-backtop :bottom="100" ref="backTop">
          <i class="el-icon-caret-top"></i>
        </el-backtop>
        <div style="margin: 0 30px">
          <div class="playBox">
            <div @mouseout="playButtonOut" @mouseover="playButtonOver" class="play-button"
                 ref="play-button">
              <el-image :src="playIcon"
                        style="width: 20px; height: 20px"/>
              <span style="font-size: 15px; color: #fff">
              播放全部
            </span>
            </div>
            <div @mouseout="playAddButtonOut" @mouseover="playAddButtonOver" class="play-add-button"
                 ref="play-add-button">
              <i class="el-icon-plus" style="color: #fff"></i>
            </div>
          </div>
        </div>

        <div style="margin: 20px 30px">
          <MusicList :data="musicList" :keyword="$route.params.keyword" :page="offset" v-show="!loading"/>
        </div>
        <div class="flex-hor-center">
          <el-pagination
            :page-size="100"
            :total="musicListLength"
            @current-change="getMusicListByCurrentPageSize"
            background
            layout="prev, pager, next"
            style="text-align: center; padding: 30px 0;">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="歌手" name="1"></el-tab-pane>
      <el-tab-pane label="专辑" name="2"></el-tab-pane>
      <el-tab-pane label="视频" name="3"></el-tab-pane>
      <el-tab-pane label="歌单" name="4"></el-tab-pane>
      <el-tab-pane label="歌词" name="5"></el-tab-pane>
      <el-tab-pane label="主播电台" name="6"></el-tab-pane>
      <el-tab-pane label="用户" name="7"></el-tab-pane>
      <el-tab-pane :label="`找到首${musicListLength}单曲`" disabled name="music-length"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
  import { searchApi } from '@/api/search'
  import { createNamespacedHelpers } from 'vuex'
  import playIcon from '@/assets/img/discover/play-icon.png'
  import MusicList from '@/components/musicList/MusicList.vue'

  const { mapActions } = createNamespacedHelpers('player')
  export default {

    data() {
      return {
        tabName: 'first',
        musicList: [],
        keyword: '',
        musicListLength: 0,
        offset: 1,
        loading: false,
        recommendData: [],
        playIcon
      }
    },
    created() {
      this.keyword = this.$route.params.keyword
      this.getMusicList()
      this.getSearchMultiMatch()
    },
    methods: {
      ...mapActions(['playMusic']),
      load() {
        console.log('加载')
      },
      /** 多重搜索 */
      getSearchMultiMatch() {
        if (!this.keyword) {
          return
        }
        return searchApi().searchMultiMatch({
          keywords: this.keyword
        }).then(res => {
          this.recommendData = res.result
        })
      },
      getMusicList() {
        this.loading = true
        // TODO 优化$http，使用自定义Service-Request
        searchApi().cloudSearch({
          keywords: this.keyword,
          limit: 100,
          offset: (this.offset - 1) * 100
        }).then(async res => {
          this.musicListLength = res.result.songCount
          this.musicList = res.result.songs
          this.loading = false
        })
      },
      getMusicListByCurrentPageSize(currentPageSize) {
        this.$refs.backTop.scrollToTop()
        this.offset = currentPageSize
        this.getMusicList()
      },

      playButtonOver(target) {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playButton.style.backgroundColor = '#DC443E'
        playAddButton.style.backgroundColor = '#E84842'
      },
      playButtonOut(target) {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playButton.style.backgroundColor = '#FD544E'
        playAddButton.style.backgroundColor = '#FD544E'
      },
      playAddButtonOver() {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playAddButton.style.backgroundColor = '#DC443E'
        playButton.style.backgroundColor = '#E84842'
      },

      playAddButtonOut() {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playButton.style.backgroundColor = '#FD544E'
        playAddButton.style.backgroundColor = '#FD544E'
      }
    },
    watch: {
      $route(to, from) {
        this.keyword = this.$route.params.keyword
        this.offset = 1
        this.getMusicList()
        this.getSearchMultiMatch()
      }
    },
    components: {
      MusicList
    }
  }
</script>

<style lang="less" scoped>

  .infinite-list {
    margin: 0;
    padding: 0;
  }

  .infinite-list-item {
    place-items: center normal;
    height: 35px;
    font-size: 14px;
    color: rgba(0, 0, 0, .6);
  }

  .infinite-list-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    height: 35px;
  }

  .infinite-list-item:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
  }

  .infinite-list-item:nth-of-type(odd):hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .music-title {
    color: #333333;
  }

  .music-artist {
    color: #50a5d9;
    cursor: pointer;
  }

  .table-layout {
    display: grid;
    grid-template-columns: 10% 30% 20% 20% 10% 10%;
  }

  .playBox {
    display: flex;
  }

  .play-button {
    background-color: #FD544E;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 35px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    outline: none;
    border: none;
  }

  .play-add-button {
    background-color: #fd544e;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    height: 35px;
    padding-right: 8px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px
  }

  .table-head {
    color: rgba(0, 0, 0, .6);
    height: 35px;
    place-items: center normal;
    font-size: 15px;
  }

  .music-duration {
    color: #8f8f8f;
  }

  @font-face {
    font-family: 'english-font';
    src: url("../../assets/font/i_'mnotlazy.ttf");
  }

  :deep(.el-tabs__active-bar) {
    height: 0;
  }

  :deep(.el-tabs__nav-scroll) {
    padding-left: 30px;
  }

  :deep(.el-tabs__item.is-active) {
    color: #000;
    font-weight: bold;
  }

  :deep(.el-tabs__item) {
    color: rgba(0, 0, 0, .6);
    font-size: 15px;
  }

  :deep(.el-tabs__item:hover) {
    color: rgba(0, 0, 0, 1);
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }

  :deep(.el-table td, .el-table th) {
    padding: 8px 0;
  }

  :deep(.el-tabs__nav) {
    width: 100%;
  }

  .top {
    overflow-y: auto;
  }

  .effect-row {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    width: 300px;
    border-radius: 5px;

    .right {
      padding-left: 10px;

      .artist {
        font-size: 14px;
        color: #333;
      }

      .album {
        font-size: 14px;
        color: #333;
      }

      .alias {
        font-size: 12px;
        color: #8f8f8f;
      }

      .fans {
        font-size: 12px;
        color: #8f8f8f;
      }

      .singer {
        font-size: 12px;
        color: #8f8f8f;
      }

    }
  }

  :deep(#tab-music-length) {
    float: right;
    padding-right: 30px;
    color: rgba(0, 0, 0, .4);
    font-size: 12px;
  }
</style>
